<template>
  <div>
    <div v-if="show">
      <h2>Vuex - Vuex - Vue入门学习</h2>
      <h2 @click="count1++">
        count -- {{ count }} -- {{ count }} -- {{ count }} -- {{ newCount }}
      </h2>
      <h2>city1 -- {{ city }} -- {{ city }}</h2>

      <h2>msg2 -- {{ msg }}</h2>

      <h2>word2 -- {{ word }}</h2>
      <h2>test -- {{ data.test }}</h2>

      <h2>data -text - {{ data.text }}</h2>
    </div>
    <hr />
    <button @click="countAdd">count+1</button>
    <button @click="countDesc">count-1</button>
    <button @click="changeCount(100)">count+100</button>
    <button @click="changeCity('应城')">应城</button>
    <button @click="changeMsg('2110 一定精通Vue')">2110 一定精通Vue</button>
    <p>
      <input type="text" :value="word" @input="change" />
    </p>
    <button @click="changeDataTest('测试')">修改 test</button>
    <button @click="changeShow(!show)">修改 test</button>
    <button @click="changeMessageAction('Vue好难学')">
      change changeMessageAction
    </button>
    <button @click="changeDataTextActionAsync('天天熬夜到3点')">
      change changeDataTextActionAsync
    </button>
  </div>
</template>


<script>
import store from "@/store";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
  name: "vuex",
  data() {
    return {
      count1: this.$store.state.count,
      city1: this.$store.state.city,
    };
  },
  computed: {
    // ...mapState({
    //   count2: (state) => state.count, //state=this.$store.state
    //   count3(state) {
    //     return state.count;
    //   },
    //   count4: "count", // 'count' 等同于 'state=>state.count'
    //   city2: "city",
    //   word2: "word",
    //   data2: "data",
    //   show2: "show",
    //   msg2: "msg",
    // }),
    // this.count 为store.state.count
    ...mapState(["count", "city", "word", "data", "show", "msg"]),
    // this.newCount=store.getters.newCount
    ...mapGetters(["newCount"]),
  },
  //   computed: {
  //     count2() {
  //       return this.$store.state.count;
  //     },
  //     city2() {
  //       return this.$store.state.city;
  //     },
  //     msg2() {
  //       return this.$store.state.msg;
  //     },
  //     word2() {
  //       return this.$store.state.word;
  //     },
  //     data2() {
  //       return this.$store.state.data;
  //     },
  //     show2() {
  //       return this.$store.state.show;
  //     },
  //   },
  methods: {
    // 将'this.countAdd()' 映射为 'this.$store.commit('countAdd')'
    ...mapMutations([
      "countAdd",
      "countDesc",
      "changeCount",
      "changeCity",
      "changeMsg",
      "changeWord",
      "changeDataTest",
      "changeShow",
    ]),
    change(e) {
      this.changeWord(e.target.value);
    },

    // this
    ...mapActions([
      "changeMessageAction",
      "changeDataTextAction",
      "changeDataTextActionAsync",
    ]),
    // changeMessageAction(m) {
    // dispatch(action) 发送action
    //   this.$store.dispatch("changeMessageAction", m);
    // },
    // changeDataTextAction(m) {
    //   this.$store.dispatch("changeDataTextAction", m);
    // },
    // countAdd() {
    //   // 修改state 唯一方式 commit mutations
    //   this.$store.commit("countAdd"); //commit(mutationType)
    // },
    // countDesc() {
    //   this.$store.commit("countDesc");
    // },
    // changeCount(n) {
    //   this.$store.commit("changeCount", n);
    // },
    // changeCity(city) {
    //   this.$store.commit("changeCity", city);
    // },
    // changeMsg(msg) {
    //   this.$store.commit("changeMsg", msg);
    // },
    // changeWord(word) {
    //   this.$store.commit("changeWord", word.target.value);
    // },
    // changeDataTest(test) {
    //   this.$store.commit("changeDataTest", test);
    // },
    // changeShow(a) {
    //   this.$store.commit("changeShow", a);
    // },
  },
  mounted() {
    console.log(store);
    console.log(this.$store);
  },
};
</script>